<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖动模态框</title>
  <link rel="stylesheet" href="./css/base.css">
  <style>
    header {
      text-align: center;
    }

    header a {
      font: normal normal 2rem "微软雅黑";
    }

    main {
      /* 防止拖动时，选中内容 */
      -webkit-user-select: none;
      user-select: none;
      display: none;
      width: 30vw;
      padding: 0 0 3rem 0;
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 999;
      transform: translate(-50%, -50%);
      background-color: #ffffff;
      border-radius: .3rem;
    }


    main fieldset {
      width: 80%;
      margin: 0 auto;
      padding: 1rem;
      border-radius: .3rem;
    }

    main>span {
      display: inline-block;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background-color: yellow;
      position: absolute;
      top: 0;
      right: 0;
      text-align: center;
      line-height: 3rem;
      transform: translate(50%, -50%);
      cursor: pointer;
    }

    main>.move {
      display: inline-block;
      width: 100%;
      height: 3rem;
      background-color: tomato;
      cursor: move;
    }

    main>fieldset>input {
      width: 100%;
      height: 40px;
      line-height: 40px;
      margin: 10px 0;
      border: none;
      border: 1px solid #cccccc;
      border-radius: 4px;
      font-size: 16px;
      padding-left: 5px;
    }

    main>fieldset>input:last-of-type {
      width: 40%;
      cursor: pointer;
      margin-left: 50%;
      transform: translateX(-50%);
    }

    footer {
      display: none;
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, .3);
    }
  </style>
</head>

<body>
  <header><a href="javascript:;" id="link">点击，弹出登录框</a></header>
  <main>
    <span>关闭</span>
    <!-- 用于拖拽的内容 -->
    <em class="move"></em>
    <fieldset>
      <legend>学生档案</legend>
      <label for="userName">用户名:</label>
      <input type="text" name="userName" id="userName" autocomplete="off" placeholder="请输入用户名" autofocus>
      <label for="pwd">登录密码:</label>
      <input type="password" name="pwd" id="pwd" autocomplete="off" placeholder="登录密码">
      <input type="button" value="登录">
    </fieldset>
  </main>
  <!-- 遮盖层 -->
  <footer></footer>
</body>
<script>
  "use strict";
  const link = document.getElementById("link");
  const main = document.querySelector("main");
  const footer = document.querySelector("footer");
  const coloseSpan = main.getElementsByTagName("span")[0];
  const move = main.querySelector(".move");


  link.addEventListener("click", () => {
    main.style.display = "block";
    footer.style.display = "block";
  });

  coloseSpan.addEventListener("click", () => {
    main.style.display = "none";
    footer.style.display = "none";
  });

  /* 
  拖拽效果
    1.涉及到三个事件，mousedown,mousemove,mouseup
    2.鼠标拖拽过程中，获取到最新的值赋值给模态框的left和top的值，这样就可以实现跟着鼠标走了
    3.鼠标坐标减去鼠标在盒子内的坐标，才是模态框的真正坐标位置
  */
  move.addEventListener("mousedown", (e) => {
    // 阻止子元素继承父元素的事件，只能触发到自身才可以往下执行
    if (e.target != e.currentTarget) return;
    // 获取鼠标在盒子内的坐标
    let x = e.pageX - main.offsetLeft;
    let y = e.pageY - main.offsetTop;

    // 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top
    const moveFn = (e) => {
      main.style.left = `${e.pageX-x}px`;
      main.style.top = `${e.pageY-y}px`;
    }
    document.addEventListener("mousemove", moveFn);

    document.addEventListener("mouseup", (e) => {
      e.currentTarget.removeEventListener("mousemove", moveFn);
    })
  });
</script>

</html>